<!--
 * @Author: your name
 * @Date: 2021-09-05 19:58:04
 * @LastEditTime: 2021-12-14 01:47:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \h5\pages\index\index.vue
-->
<template>
  <view>
    <view>
      <u-gap height="10" bg-color="#F2F2F2"></u-gap>

      <scroll-view
        class="scrool-more"
        style="height: 100vh ;padding-bottom:98rpx;"
        scroll-y="true"
        scroll-with-animation="true"
      >
        <!-- banner -->
        <banner
          :typeData="typeData"
          :goodsBannerData="goodsBannerData"
          @handleJump="handleJump"
        />
        <u-gap height="18" bg-color="#F2F2F2"></u-gap>
        <seleShop :typeData="typeData" @handleJump="handleJump" />
        <u-gap height="18" bg-color="#F2F2F2"></u-gap>
        <view v-if="goodsBannerData.description">
          <u-cell-group v-if="!isActive" :border="false">
            <u-cell-item :border-bottom="false" :arrow="false">
              <text slot="icon" class="icon"></text>
              <text slot="title" class="title">商品详情</text>
            </u-cell-item>
          </u-cell-group>
          <view v-if="isActive" class="singleView">
            <text class="singleText">
              商品详情
            </text>
          </view>
          <view class="u-content">
            <u-parse :html="goodsBannerData.description"></u-parse>
          </view>
          <u-gap height="18" bg-color="#F2F2F2"></u-gap>
        </view>
      </scroll-view>
      <!-- 底部固定状态 -->
      <view class="myfooter">
        <view class="buyBox" @click="handleJump">
          <text class="buyNow">立即购买</text>
        </view>
      </view>
    </view>

    <u-toast ref="uToast" />
    <!--客服悬浮窗-->
    <serviceSuspension
      @close="serviceClose"
      @Service="Service"
      :show="service_show"
    ></serviceSuspension>
    <kefu :isKefuShow.sync="isKeFuShow"></kefu>
  </view>
</template>

<script>
import banner from "@/components/Goods/goodsBanner.vue";
import seleShop from "@/components/Goods/seleShop.vue";
import { productDetail, getShareWebpageInfo } from "@/api/rc.js";
import serviceSuspension from "@/components/suspension/serviceSuspension";
import kefu from "@/components/kefu/kefu.vue";
export default {
  components: {
    banner, // banner
    seleShop, // 领取优惠选择版本及运费
    serviceSuspension,
    kefu
  },
  data() {
    return {
      typeData: {},
      goodsBannerData: {}, // goodsBanner 组件数据
      listQuery: {
        path: `/pageA/goods/goods`, // 小程序页面跳转链接
        query: {
          goodsId: null,
          d_id: null,
          isActive: false
        }
      },
      isShare: null,
      //客服悬浮窗
      service_show: true,
      //客服弹窗
      isKeFuShow: false,
      isActive: false
    };
  },

  onLoad(option) {
    console.log("🚀 ~ file: index.vue ~ line 80 ~ onLoad ~ option", option);
    /**
     * @description:  用于分享时的判断 ， 存储当前用户的uid , 过期时间为7天 ， pid 是普通用户分享的
     * 只有提交订单的时候把分享进来得到的pid或者d_id传过去就行，pid是一次性的，d_id是有有效期的
     *  区分是 分销商【存在浏览器存储中】还是 普通用户【存在vuex 中】
     * @param {*} option
     * @return {*}
     */
    this.$store.commit(
      "isActive",
      JSON.parse(decodeURIComponent(Object.keys(option)[0])).isActive
        ? true
        : false
    );
    // this.isActive = option.isActive ? true : false;
    this.listQuery.query.d_id = JSON.parse(
      decodeURIComponent(Object.keys(option)[0])
    ).d_id
      ? JSON.parse(decodeURIComponent(Object.keys(option)[0])).d_id
      : undefined;
    this.isShare = JSON.parse(decodeURIComponent(Object.keys(option)[0]))
      .is_share
      ? JSON.parse(decodeURIComponent(Object.keys(option)[0])).is_share
      : undefined;
    this.listQuery.query.goodsId = JSON.parse(
      decodeURIComponent(Object.keys(option)[0])
    ).goodsId
      ? JSON.parse(decodeURIComponent(Object.keys(option)[0])).goodsId
      : undefined;
    this.listQuery.query.isActive = JSON.parse(
      decodeURIComponent(Object.keys(option)[0])
    ).isActive
      ? 1
      : 0;
    this.isActive = JSON.parse(decodeURIComponent(Object.keys(option)[0]))
      .isActive
      ? true
      : false;
    console.log(this.$store, "---");
  },
  onShow() {
    this.service_show = true;
  },
  mounted() {
    this.init();
  },

  methods: {
    async init() {
      const params = {
        id: this.listQuery.query.goodsId,
        distributionUid: this.listQuery.query.d_id,
        is_share: this.isShare
      };
      await productDetail(params).then(res => {
        // console.log("init -> res", res);
        this.goodsBannerData = res.data.storeInfo;
        // 处理默认选择数据的逻辑
        this.typeData =
          res.data.productValue[Object.keys(res.data.productValue)[0]];
      });
    },
    async handleJump() {
      // h5 平台
      //#ifdef H5
      await getShareWebpageInfo(this.listQuery).then(res => {
        // console.log("handleJump -> res", res);
        window.location.href = res.data.url;
      });
      //#endif

      //微信平台
      //#ifdef MP-WEIXIN
      await getShareWebpageInfo(this.listQuery).then(res => {
        // console.log("handleJump -> res", res);
        window.location.href = res.data.wx_url;
      });
      //#endif

      // app平台
      //#ifdef APP-PLUS
      this.$refs.uToast.show({
        title: " app平台暂未开放此功能"
      });
      //#endif
    },
    //关闭客服悬浮窗
    serviceClose(val) {
      this.service_show = val;
    },
    //打开联系客服
    Service() {
      this.isKeFuShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.singleView {
  width: 750rpx;
  height: 66rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .singleText {
    // width: 96rpx;
    height: 34rpx;
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 34rpx;
    color: #000000;
    opacity: 1;
    margin-bottom: 24rpx;
  }
}
.buyBox {
  width: 750rpx;
  height: 70rpx;
  opacity: 1;
  background: #f00;
  .buyNow {
    display: inline-block;
    width: 750rpx;
    height: 70rpx;
    opacity: 1;
    font-size: 32rpx;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 70rpx;
    letter-spacing: 2rpx;
  }
}
.conform {
  display: flex;
  height: 100rpx;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: left;
  color: #000;
  line-height: 100rpx;
  letter-spacing: 2rpx;
  text-align: center;
}
.shareList {
  display: flex;
  justify-content: center;
  height: 200rpx;
  .firendList,
  .haibao {
    width: 375rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .word {
      font-size: 32rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-align: left;
      color: #000;
      line-height: 66rpx;
      letter-spacing: 2rpx;
      text-align: center;
    }
  }
}
.goodsConter {
  height: 100vh;
  overflow-y: auto;
}

.icon {
  width: 5rpx;
  height: 34rpx;
  opacity: 1;
  background: #fb4d2e;
  border-radius: 3rpx;
}

.title {
  width: 196rpx;
  height: 34rpx;
  opacity: 1;
  font-size: 32rpx;
  font-family: SourceHanSansCN-Regular;
  text-align: left;
  color: #333333;
  line-height: 38rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
}

.myfooter {
  margin: 0 auto;
  width: 750rpx;
  position: fixed;
  bottom: 0;
  border-top: 10rpx solid #e5e5e5;
}
/deep/.share_btn {
  background: #fff;
  line-height: initial;
  box-sizing: initial;
  padding: auto;
  display: flex;
  width: 100%;
  justify-content: center;
}
.u-content {
  /deep/img {
    width: 750rpx;
  }
}
</style>
